<template>
	<view class="manager-page">
		<custom-bar :isShowBack="false">
			<view class="head">
				<image src="@/static/logo.png" mode="" style="width: 45rpx; height: 45rpx;padding-right:20rpx"></image>
				<text>小源</text>
			</view>
		</custom-bar>
		<view class="manager-title">
			选择项目
		</view>

		<view class="manager-list" v-for="(item,i) in deviceList" :key="i" @click="goItemList(item.itemId)">
			<view class="manager-list-left">
				<view class="manager-list-left-top">
					{{item.itemName}}
				</view>
				<view class="manager-list-left-btm">
					设备:<text style="padding-left:15rpx">{{item.devCount}}台</text><text
						style="padding-left:10rpx">在线{{item.devOnlineCount}}台</text>
				</view>
			</view>
			<view class="manager-list-right">
				<up-icon name="arrow-right" size="40rpx"></up-icon>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useUserStore
	} from '@/store/user'

	// 获取store实例
	const userStore = useUserStore()
	onLoad((e) => {
		getList()
	})
	const pageNum = ref(1)
	const pageSize = ref(30)
	const deviceList = ref([])

	const getList = async () => {
		let data = {
			pageNum: pageNum.value,
			openid: userStore.userInfo.openid,
			pageSize: pageSize.value
		}
		uni.$u.http.post('/wechat/getItemListByOpenid', data).then((res) => {
			console.log(res, "管理员用户设备列表")
			deviceList.value = res.data;
		})
	}
	const goItemList = (val) => {
		uni.switchTab({
			url: `/pages/index/index?itemId=${encodeURIComponent(val)}`,

		})
	}
</script>

<style lang="scss" scoped>
	.manager-page {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(to bottom, #dae0eb, #f1f1f1);

	}

	.manager-title {
		margin: 20rpx 40rpx 0 40rpx;
	}

	.manager-list {
		height: 130rpx;
		margin: 25rpx 40rpx;
		background: #fff;
		border-radius: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;

		.manager-list-left-top {
			line-height: 50rpx;
			margin-bottom: 10rpx;
		}

		.manager-list-left-btm {
			color: #797979;
			font-size: 26rpx;
		}
	}
</style>